<script setup lang="ts">
import type { Props } from './utils/types'
import { QuestionFilled } from '@element-plus/icons-vue'

defineProps<Props>()

</script>

<template>
    <div class="content-title">
        <h2 class="title">{{ title }}</h2>
        <el-popover placement="right-start" width="auto" trigger="hover" v-if="content">
            <template #reference>
                <el-icon color="#eeeeee" style="font-size: 20px;">
                    <QuestionFilled />
                </el-icon>
            </template>
            <span class="content-title-text" v-html="content"></span>
        </el-popover>
    </div>
</template>

<style lang="scss">
.content-title-text {
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
}

.content-title {
    display: flex;
    align-items: center;
    gap: 0 10px;


    .title {
        color: rgba(16, 16, 16, 1);
        font-size: 20px;
        display: flex;
        align-items: center;
        font-family: 'SOURCEHANSANSCN-REGULAR';

        &::before {
            content: '';
            display: block;
            width: 5px;
            height: 16px;
            border-radius: 5px;
            background-color: rgba(249, 20, 20, 1);
            margin-right: 6px;
        }
    }
}
</style>
